<template>
    <div>
      <el-row>
        <el-col span="2" offset="22">
          <el-button type="primary">选择商品</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col span="2" offset="4">
          <font size="4">盘点单号:</font>
        </el-col>
        <el-col span="3">
           <el-input v-model="input1" disabled=""></el-input>
        </el-col>
        <el-col span="2" offset="5">
          <font size="4"> 审核状态:</font>
        </el-col>
        <el-col span="3">
          <el-input v-model="input2" disabled=""></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col span="2" offset="4" >
          <font size="4">盘点门店：</font>
        </el-col>
        <el-col span="3">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col span="2" offset="5">
          <font size="4">经办人员:</font>
        </el-col>
        <el-col span="3">
          <el-input v-model="input3" ></el-input>
        </el-col>
      </el-row>
      <br/>
      <el-row>
        <el-col span="2" offset="4">
          <font size="4"> 审核备注:</font>
        </el-col>
        <el-col span="3">
          <el-input v-model="input4" ></el-input>
        </el-col>
      </el-row>
      <br/>
      <el-row>
        <el-col span="20" offset="2" >
          <el-table
            :data="tableData"
            border
            show-summary
            style="width: 100%">
            <el-table-column
              prop="goodsId"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="goodsNum"
              label="编码">
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="goodsUnit"
              label="单位">
            </el-table-column>
            <el-table-column
              prop="goodsAmount"
              sortable
              label="盘点数量">
            </el-table-column>
            <el-table-column
              prop="goodsAmount"
              sortable
              label="系统库存">
            </el-table-column>
            <el-table-column
              prop="goodsAmount"
              sortable
              label="盘盈数量">
            </el-table-column>
            <el-table-column
              prop="goodsAmount"
              sortable
              label="盘亏数量">
            </el-table-column>
            <el-table-column
              prop="goodsAmount"
              sortable
              label="零售价">
            </el-table-column>
            <el-table-column
              prop="operations"
              label="操作">
              <el-button size="mini" round>删除</el-button>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <br>
      <el-row>
        <el-col span="2" offset="2">
          <font size="4">制单人员:</font>
        </el-col>
        <el-col span="2">
          <el-input v-model="input5" ></el-input>
        </el-col>
        <el-col span="2" offset="1">
          <font size="4"> 制单日期:</font>
        </el-col>
        <el-col span="2">
          <el-input v-model="input6" ></el-input>
        </el-col>
        <el-col span="2" offset="1">
          <font size="4">审核人员:</font>
        </el-col>
        <el-col span="2">
          <el-input v-model="input7" ></el-input>
        </el-col>
        <el-col span="2" offset="1">
          <font size="4"> 审核日期:</font>
        </el-col>
        <el-col span="2">
          <el-input v-model="input8" ></el-input>
        </el-col>
      </el-row>
      <br>
      <el-row>
      <el-col span="3" offset="2">
        <el-button type="primary">保存</el-button>
      </el-col>
      <el-col span="3" >
        <el-button>取消</el-button>
      </el-col>
      </el-row>
    </div>
</template>
<script>
    export default {
        name: "SaveCheckStock",
      data() {
        return {
          input1: '入库单号',
          input2:'待审核',
          input3:'小王',
          input4:'好活',
          input5:'Giao',
          input6:'2021-12-12',
          input7:'王姐',
          input8:'2021-12-13',
          options: [{
            value: '选项1',
            label: '北京店'
          }, {
            value: '选项2',
            label: '上海店'
          }, {
            value: '选项3',
            label: '深圳店'
          }, {
            value: '选项4',
            label: '贵州店'
          }, {
            value: '选项5',
            label: '成都店'
          }],
          options2: [{
            value: '选项1',
            label: '北京店'
          }, {
            value: '选项2',
            label: '上海店'
          }, {
            value: '选项3',
            label: '成都店'
          }],
          value: '',
          tableData: [{
            goodsId: '1',
            goodsNum: 'GO123456588',
            goodsName: '小汉堡',
            goodsUnit: '个',
            goodsAmount: 100,
            goodsRemark: '老八直呼过瘾',
          }, {
            goodsId: '2',
            goodsNum: 'GO123456588',
            goodsName: '小汉堡',
            goodsUnit: '个',
            goodsAmount: 100,
            goodsRemark: '老八直呼过瘾',
          }, {
            goodsId: '3',
            goodsNum: 'GO123456588',
            goodsName: '小汉堡',
            goodsUnit: '个',
            goodsAmount: 100,
            goodsRemark: '老八直呼过瘾',
          }, {
            goodsId: '4',
            goodsNum: 'GO123456588',
            goodsName: '小汉堡',
            goodsUnit: '个',
            goodsAmount: 100,
            goodsRemark: '老八直呼过瘾',
          }, {
            goodsId: '5',
            goodsNum: 'GO123456588',
            goodsName: '小汉堡',
            goodsUnit: '个',
            goodsAmount: 100,
            goodsRemark: '老八直呼过瘾',
          }]
        }
      },
      methods: {
        handleClick() {
          alert('button click');
        },
        getSummaries(param) {
          const { columns, data } = param;
          const sums = [];
          columns.forEach((column, index) => {
            if (index === 0) {
              sums[index] = '总价';
              return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
              sums[index] += ' 元';
            } else {
              sums[index] = 'N/A';
            }
          });

          return sums;
        }
      }
    }
</script>

<style scoped>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
